<template>
  <view class="main-bg">
    <z-nav-bar backState='3000' @backClick='backClick' type='transparent' :titleCenter='true' title='' />
    <public-module />
    <view class="header-gradient">
      <text class="main-title">联络员信息</text>
    </view>
    <view class="form-card">
      <!-- <view class="form-title">联络员信息:</view> -->
      <view class="form-group">
        <text class="label">经营者姓名:</text>
        <input v-model="form.name" class="input" placeholder="请输入经营者姓名" />
      </view>
      <view class="form-group">
        <text class="label">证件类型:</text>
        <input v-model="form.idType" class="input" placeholder="请输入证件类型" />
      </view>
      <view class="form-group">
        <text class="label">证件号码:</text>
        <input v-model="form.idNumber" class="input" placeholder="请输入证件号码" />
      </view>
      <view class="form-group">
        <text class="label">移动电话:</text>
        <input v-model="form.mobile" class="input" placeholder="请输入移动电话" />
      </view>
      <view class="form-group">
        <text class="label">固定电话:</text>
        <input v-model="form.tel" class="input" placeholder="请输入固定电话" />
      </view>
      <button class="submit-btn" @tap="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '', idType: '', idNumber: '', mobile: '', tel: ''
      }
    }
  },
  onLoad() {
    // 自动回显缓存
    const allFormData = uni.getStorageSync('allFormData');
    if (allFormData) {
      this.form.name = allFormData.jyzname || '';
      this.form.idType = allFormData.jyztype || '';
      this.form.idNumber = allFormData.jyzid || '';
      this.form.mobile = allFormData.jyzphone || '';
      this.form.tel = allFormData.jyzlandline || '';
    }
  },
  methods: {
    backClick() {
      uni.navigateBack();
    },
    submit() {
      let allFormData = uni.getStorageSync('allFormData') || {};
      allFormData = {
        jcname: allFormData.jcname || '',
        jcphone: allFormData.jcphone || '',
        jcyzbm: allFormData.jcyzbm || '',
        jcprovince: allFormData.jcprovince || '',
        jccity: allFormData.jccity || '',
        jcdistrict: allFormData.jcdistrict || '',
        jctownship: allFormData.jctownship || '',
        jcvillage: allFormData.jcvillage || '',
        jch: allFormData.jch || '',
        jctxt: allFormData.jctxt || '',
        jcjyz: allFormData.jcjyz || '',
        jcje: allFormData.jcje || '',
        jczz: allFormData.jczz || '',
        jcfb: allFormData.jcfb || '',
        jcfw: allFormData.jcfw || '',
        jyzname: this.form.name || '',
        jyztype: this.form.idType || '',
        jyzid: this.form.idNumber || '',
        jyzphone: this.form.mobile || '',
        jyzlandline: this.form.tel || '',
        dlrqx: allFormData.dlrqx || '',
        dlrqs: allFormData.dlrqs || '',
        dlrxg: allFormData.dlrxg || '',
        dlrtx: allFormData.dlrtx || '',
        dlrlandline: allFormData.dlrlandline || '',
        dlrphone: allFormData.dlrphone || '',
        jycsdistrict: allFormData.jycsdistrict || '',
        jycsvillage: allFormData.jycsvillage || '',
        jycsroad: allFormData.jycsroad || '',
        jycsfw: allFormData.jycsfw || '',
        jycsyt: allFormData.jycsyt || '',
        jycsfs: allFormData.jycsfs || '',
        jycsqx: allFormData.jycsqx || '',
        jycsdj: allFormData.jycsdj || ''
      };
      uni.setStorageSync('allFormData', allFormData);
	  console.log(uni.getStorageSync('allFormData'))
      uni.showToast({ title: '已保存到本地', icon: 'success' });
      // 不再清空表单字段
      // this.form = { ... };
    }
  }
}
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: #5fa8e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 40rpx 0 0 0; */
}
.header-gradient {
  width: 100vw;
  height: 110rpx;
  background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(30,105,222,0.08);
}
.main-title {
  font-size: 40rpx;
  color: #222;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.form-card {
  background: #5fa8e6;
  border-radius: 32rpx;
  /* padding: 40rpx 32rpx; */
  width: 90vw;
  box-shadow: 0 8rpx 32rpx rgba(30,105,222,0.10);
  color: #fff;
  margin-top: 20rpx;
  animation: fadeInUp 0.5s;
}
.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #222;
}
.form-group {
  margin-bottom: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.label {
  /* width: 180rpx; */
  font-size: 34rpx;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-right: 16rpx;
}
.input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 2rpx solid #222;
  border-radius: 0;
  /* padding: 10rpx 0; */
  font-size: 34rpx;
  color: #222;
  outline: none;
}
.submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #6db3f2 0%, #1e69de 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  /* padding: 24rpx 0; */
  margin-top: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(30,105,222,0.10);
  transition: background 0.2s;
}
.submit-btn:active {
  background: #1e69de;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style> 